<template>
  <div class="col-sm-12">
    <div class="form-horizontal">
      <div class="site-bgcolor">
        <hr/>
        <div class="form-group" v-if="mode=='modeAddNew'">
          <label for="originname" class="col-sm-2 control-label">文件名</label>

          <div class="col-sm-4">
            <input class="form-control" id="originname" name="originname"
                   v-model="item.originname">
          </div>
        </div>

        <div class="form-group" v-if="mode=='modeEdit'">
          <label for="curname" class="col-sm-2 control-label">curname</label>

          <div class="col-sm-4">
            <input class="form-control" id="curname" name="curname" placeholder="curname" v-model="item.curname"/>
          </div>

        </div>
        <div class="form-group" v-if="mode=='modeAddNew'">
          <label for="crtuser" class="col-sm-2 control-label">crtuser</label>

          <div class="col-sm-4">
            <input class="form-control" id="crtuser" name="crtuser" v-model="item.crtuser"></input>
          </div>
        </div>
        <div class="form-group" v-if="mode=='modeEdit'">
          <label for="upduser" class="col-sm-2 control-label">upduser</label>

          <div class="col-sm-4">
            <input class="form-control" id="upduser" name="upduser" placeholder="crtuser" v-model="item.upduser"/>
          </div>
        </div>
        <div class="form-group" v-if="mode=='modeAddNew'">
          <label for="upddate" class="col-sm-2 control-label">upddate</label>

          <div class="col-sm-4">
            <input class="form-control" id="upddate" name="upddate" placeholder="xxxx-xx-xx hh:mm:ss"
                   v-model="item.upddate"/>
          </div>
        </div>
        <form v-if="mode=='modeAddNew'" id="uploadForm" name="uploadForm">
          <div class="form-group">
            <label for="fileId2" class="col-sm-2 control-label">file</label>

            <div class="col-sm-4">
              <input class="form-control" id="fileId2" type="file" name="file"/>
            </div>
          </div>
        </form>
        <div class="form-group">
          <div class="col-sm-3 col-md-push-9">
            <button class="btn btn-default" v-on:click="onCancelClick()">取消</button>
            <button class="btn btn-default" v-on:click="onSubmitClick(file)">提交</button>
          </div>
        </div>
        <br>
      </div>
    </div>
  </div>
</template>
<style>
  .site-bgcolor {
    background: AliceBlue
  }
</style>
<script>
  export default {
    name: 'itemEdit',
    data: function () {
      return {
        uuid: ''
      }
    },
    props: ['item', 'mode', 'url'],
    components: {},
    methods: {
      onCancelClick: function () {
        this.$dispatch('component', 'modeList')
      },
      onSubmitClick: function () {
        var formData = new window.FormData(document.forms.namedItem('uploadForm'))
        if (this.mode === 'modeAddNew') {
          this.$http.post(this.url, this.item).then(function (response) {
            this.uuid = response.data.uuid
            console.log(this.uuid)
            var suffix = response.data.originname.substring(response.data.originname.lastIndexOf('.') + 1)
            formData.append('name', response.data.uuid + '.' + suffix)
            formData.append('file', document.forms.namedItem('uploadForm'))
            this.upload(formData)
            this.$dispatch('finditem')
            this.$dispatch('component', 'modeList')
            window.alert('提交成功 ')
            this.item = {}
          }, function (response) {
            window.alert('failed to save,Probably failed to connect the backend server! Pls check your server status! ')
          })
        } else {
          this.$http.put(this.url + this.item.id, this.item).then(function (response) {
            window.alert('修改成功 ')
            this.$dispatch('component', 'modeList')
          }, function (response) {
            this.$dispatch('finditem')
            window.alert('failed to update,Probably failed to connect the backend server! Pls check your server status! ')
          })
        }
      },
      upload: function (formData) {
        this.$http.post('http://euvee.vicp.co/rest/file', formData).then(function (response) {
        }, function (response) {
          window.alert('文件提交失败! 状态码：' + response.status)
        })
      }
    }
  }
</script>
